<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<c:url value="/" var="baseUrl" />
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="img/favicon.png">
 <link rel="stylesheet" href="${baseUrl}layui/css/layui.css"  media="all">
<title>山东电信宽带异常分析助手</title>
<%@include file="../include/css.jsp"%>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script> 
	<%@include file="../include/scripts.jsp"%>

    <script type="text/javascript" src="${baseUrl}layer-v3.0.3/layer/layer.js"></script>
    
    <script>  
    /*
        ;!function(){  
            layer.config({//加载扩展模块  
                extend: 'extend/layer.ext.js'  
            });  
            layer.ready(function(){   
            });  
        }();  
        */  
        function ityzl_SHOW_LOAD_LAYER(){  
            return layer.msg('努力计算中，请稍候...', {icon: 16,shade: [0.5, '#f5f5f5'],scrollbar: false,offset: '430px', time:100000}) ;  
        }  
        function ityzl_CLOSE_LOAD_LAYER(index){  
            layer.close(index);  
        }  
        function ityzl_SHOW_TIP_LAYER(){  
            layer.msg('恭喜您，加载完成！',{time: 1000,offset: '10px'});  
        }  
    </script> 
    <script>  
$(function(){ 
    $("#pageJumpButton").hide();
    $("#btnRequest").bind("click", function () {  
        var i ;
        var date=$('#years').val()+$('#date').val();
        
        var avgFlow=document.getElementById("avgFlow2").value;;
        
        var days=document.getElementById("days").value;;
        if(avgFlow==""||isNaN(avgFlow))
    	{
    	alert("请输入数字");
    	}
        if(days==""||isNaN(days))
    	{
    	alert("请输入数字");
    	}
    
       
        $.ajax({  
            type: "post",  
            dataType: "json", 
            data:{"date":date,"avgFlow":avgFlow,"days":days}, 
            url: "${baseUrl}json/JsonAvgFlow",  
            beforeSend: function () {  
                i = ityzl_SHOW_LOAD_LAYER();  
            },  
            success: function (data) {  
                ityzl_CLOSE_LOAD_LAYER(i);
                
                // 翻页函数开始
                jsonData = data;
                pn = 1;
                totalCount = jsonData.total;
                pageSize = 10;
                pageTotal = Math.ceil(totalCount / pageSize);
                $("#total-page").text(pageTotal);
                
                $("#next").click(function() {
                  if (pn == pageTotal) {
                    pn = pageTotal;
                  } else {
                    pn++;
                    gotoPage();
                  }
                });
                $("#prev").click(function() {
                  if (pn == 1) {
                    pn = 1;
                  } else {
                    pn--;
                    gotoPage();
                  }
                });
                $("#firstPage").click(function() {
                  pn = 1;
                  gotoPage();
                });
                $("#lastPage").click(function() {
                  pn = pageTotal;
                  gotoPage();
                });
                $("#firstPage").trigger("click");
                // 翻页函数结束
                
                ityzl_SHOW_TIP_LAYER(); 
            },  
            error: function (e, jqxhr, settings, exception) {  
                ityzl_CLOSE_LOAD_LAYER(i);  
            }  
        });  
    });  
});  

function gotoPage() {
      $("#current-page").text(pn);
      
      var startPage = pageSize * (pn - 1);
      var endPage = startPage + pageSize - 1;
      var $tb = $("#table-json");
      $tb.empty();
      $tb.append('<tr><th>地市</th><th>帐号</th><th>下行总流量(GB)</th><th>累计在线天数</th><th>拨号次数</th><th><font color="#FF0000">下行日均流量(GB)</font></th><th>装机地址</th></tr>');
      for (var i = 0; i < pageSize; i++) {
        $tb.append('<tr class="tr-tag"></tr>');
      }
      var subjects = jsonData.subjects;
      if (pageTotal == 1) {
              $("#pageJumpButton").hide();
          for (var j = 0; j < totalCount; j++) {
              $(".tr-tag").eq(j)
              .append("<td>" + subjects[j].city + "</td>")
              .append("<td>" + subjects[j].account + "</td>")
              .append("<td>" + subjects[j].sumFlow + "</td>")
              .append("<td>" + subjects[j].days + "</td>")
              .append("<td>" + subjects[j].numOfFlow + "</td>")
              .append("<td>" + subjects[j].avgFlow + "</td>")
              .append("<td>" + (typeof(subjects[j].address) == "undefined" ? "" : subjects[j].address) + "</td>");
          }
      } else {
              $("#pageJumpButton").show();
          for (var j = startPage, k = 0; j < endPage, k < pageSize; j++, k++) {
            if(j == totalCount) {
              break;
            }
            $(".tr-tag").eq(k)
            .append("<td>" + subjects[j].city + "</td>")
            .append("<td>" + subjects[j].account + "</td>")
            .append("<td>" + subjects[j].sumFlow + "</td>")
            .append("<td>" + subjects[j].days + "</td>")
            .append("<td>" + subjects[j].numOfFlow + "</td>")
            .append("<td>" + subjects[j].avgFlow + "</td>")
            .append("<td>" + (typeof(subjects[j].address) == "undefined" ? "" : subjects[j].address) + "</td>");
          }
      }
}

</script> 
<script type="text/javascript">
function addParam()
{
  var objA=document.getElementById("a1");
  objA.href="ExportAvgFlow?avgFlow="+document.getElementById("avgFlow2").value+
		  "&days="+document.getElementById("days").value+
		  "&date="+$('#years').val()+$('#date').val();
		  
}
</script>

</head>

<body>
	<!-- container section start -->
	<section id="container" class=""> 
	<%@include file="../include/header.jsp"%> 
	<%@include file="../include/sidebar.jsp"%> 
	<!--main content start-->
	<section id="main-content"> 
	<section class="wrapper">
	<!--overview start--> 
	<!--主显示区域--开始-->
	<form action="${baseUrl}front/ListAvgFlow?date=${date}" method="post">
		<input type="hidden" name="pageNo" value="${paging.pageNo}" /> 
		<input type="hidden" name="pageSize" value="${paging.pageSize}" /> 
		<input type="hidden" name="months" value="${months}" />

		<div align="left" >
		异常门限：日均流量>=<input type="text" id="avgFlow2"  style="width:60px; padding-top:5px; margin-top:10px;" value="100" />(默认值100) 
		&nbsp;&nbsp;&nbsp;&nbsp;天数>=<input type="text" id="days" style="width:60px; padding-top:5px; margin-top:10px;" value="20" /> (默认值20)
           &nbsp;&nbsp;&nbsp;&nbsp; <label >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;请选择分析月份 ：</label> 
            <select class="easyui-combobox" id="years" name="select" panelHeight="auto" 
                style="width:60px; padding-top:5px; margin-top:10px;">
                <option value="2016">2016</option> 
                <option value="2017" selected="selected">2017</option> 
                <option value="2018">2018</option> 
            </select>年
            <select class="easyui-combobox" id="date" name="date"  panelHeight="auto" 
                style="width:40px; padding-top:5px; margin-top:10px;">
				<option value="01">01</option> 
				<option value="02">02</option> 
				<option value="03">03</option> 
				<option value="04">04</option> 
				<option value="05">05</option> 
				<option value="06">06</option> 
				<option value="07">07</option>
				<option value="08" selected="selected">08</option> 
				<option value="09">09</option>
				<option value="10">10</option> 
				<option value="11">11</option> 
				<option value="12">12</option>   
		    </select>月 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <input type="button"  class="layui-btn layui-btn-normal" id="btnRequest" value="开始分析" name="find">
        </div>

		<header class="panel-heading">
		    <div style="display: inline-block; width: 90%; text-align: center">
		        下行日均流量
		    </div>
		    <div style="display: inline-block">
			    <a id="a1" href="" onclick="addParam()">[导出明细]</a>
		    </div>
		</header>
		<table class="table table-striped table-advance table-hover">
			<tbody id="table-json">
				<tr>
					<th>地市</th>
					<th>账号</th>
					<th>下行总流量(GB)</th>
					<th>累计在线天数</th>
                    <th>拨号次数</th>
                    <th><font color="#FF0000">下行日均流量(GB)</font></th>
                    <th>装机地址</th>
				</tr>
			</tbody>
		</table>
        <div align="center" id="pageJumpButton">
            <button type="button" id="firstPage">首页</button>
            <button type="button" id="prev">上一页</button>
            第<span id="current-page">1</span>页&nbsp;
            共<span id="total-page">0</span>页
            <button type="button" id="next">下一页</button>
            <button type="button" id="lastPage">尾页</button>
        </div>
	</form>

	<!-- project team & activity start --> <br>
	<br>
	<!-- project team & activity end --> <!--主显示区域--结束--> </section> </section> <!--main content end-->
	</section>
	<!-- container section start -->

    <script>
$("#sidebarMyChart").removeClass('active');
$("#sidebarListSameMac").removeClass('active');
$("#sidebarListAvgFlow").addClass('active');
$("#sidebarScatter").removeClass('active');
$("#sidebarListSigData").removeClass('active');
$("#sidebarListTop10").removeClass('active');
$("#sidebarListAccount").removeClass('active');
$("#sidebarBWListAdmin").removeClass('active');
$("#sidebarListDoc").removeClass('active');
$("#sidebarListUser").removeClass('active');
</script>

</body>
</html>

